		
<template>
	<view class="box">
		<view class="content">
            <view class="title1">请输入绑定银行的手机号</view>
            <view  class="title2">为确保您的账号安全及正常使用，根据《网络安全法》相关要求，账号需要验证手机号</view>
            <u--form
            :model="formData"
            :rules="rules"
            ref="uForm"
            labelWidth="160"
          >
            <view class="formbox">
              <u-form-item label="+86" prop="phoneNum" :borderBottom="true">
                <u--input
                  border="none"
                  placeholder="手机号码"
                  clearable
                  v-model="formData.phoneNum"
                  :focus="mobileFocus"
                />
              </u-form-item>
              <u-form-item label="验证码" prop="verifyCode" :borderBottom="true">
                <u-input
                  v-model="formData.verifyCode"
                  placeholder="请输入验证码"
                  border="none"
                />
                <template #right>
                  <u-code
                    ref="uCodeRef"
                    @change="codeChange"
                    seconds="60"
                    changeText="X秒重新获取"
                  ></u-code>
                  <!-- <template #right> 获取验证码 </template> -->
                  <text @tap="getCode" class="yanzm">{{ tips }}</text>
                </template>
              </u-form-item>
            </view>
          </u--form>
        </view>
            <!-- 吸底工具栏 -->
    <view
    class="toolbar-height"
    :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
  ></view>
  <view
    class="toolbar"
    :style="{ paddingBottom: safeAreaInsets?.bottom + 30 + 'px' }"
  >
    <view class="button-grounp">
      <view @tap="submit" class="button payment-button"> 确定解绑 </view>
    </view>
  </view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive} from "vue";
    import { sendSMS } from "@/utils/api";
import { memberPayAccountDelete } from "@/utils/api";
import { onLoad } from "@dcloudio/uni-app";
onLoad((options) => {
  formData.id=options.id
  console.log(55555,formData.id,options)
});
    const rules = {
//   certificateName: {
//     type: "string",
//     required: true,
//     message: "请输入姓名",
//     trigger: ["blur"],
//   },
//   certificateCardNumber: {
//     type: "string",
//     required: true,
//     message: "请输入",
//     trigger: ["blur"],
//   },
};
    // 获取验证码'
const mobileFocus = ref(false);
const tips = ref("获取验证码");
const codeChange = (text) => {
  tips.value = text;
};
const uCodeRef = ref(null);
const formData = reactive({

});
const uForm = ref();
const getCode = async () => {
  if (formData.phoneNum && /^1\d{10}$/.test(formData.phoneNum)) {
    if (uCodeRef.value.canGetCode) {
      uni.showLoading({
        title: "正在获取验证码",
      });
      try {
        let params = {
          mobile: formData.phoneNum,
          type: 7,
        };
        console.log(formData.phoneNum);
        // 需要对接后端获取验证码 不然会报错
        const { data } = await sendSMS(params);
        uni.hideLoading();
        uni.$u.toast("验证码已发送");
        // 通知验证码组件内部开始倒计时
        uCodeRef.value.start();
      } catch (e) {
        console.error(e);
      }
    } else {
      mobileFocus.value = false;
      uni.$u.toast("倒计时结束后再发送");
    }
  } else {
    uni.$u.toast("请输入正确的手机号码");
    mobileFocus.value = true;
  }
};
const submit = () => {
    let param = JSON.parse(JSON.stringify(formData));
    memberPayAccountDelete(param).then((res) => {
      console.log('解绑了', res);
      uni.navigateTo({
        url: "/pages/me/payList",
      });
    });
  
};
</script>
<style lang="scss" scoped>
    .box {
  padding: 20rpx;
}
.content {
  padding: 26rpx 32rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  border-radius: 14rpx;
}
.title1{
	font-size: 31rpx;
	font-weight: 500;
	color: #060C3C;
	line-height: 43rpx;
	margin-bottom: 14rpx;
	}
.title2{
	font-size: 22rpx;
color: #aaacbc;
line-height: 31rpx;
margin-bottom: 10rpx;
	}
</style>
